<template>
	<view class="container">
		<view class="pad-26 bg-white">
			<view class="font-28">
				<view>ACCP合作银行账户：{{bank_account}}</view>
			</view>

			<view class="centerXY mar-top-20">
				<view @click="hanldeRecharge"
					class="recharge font-24 color-white pad-left-right-32 pad-top-bottom-8 radius6">充值</view>
				<view @click="hanldeWithdrawal"
					class="withdrawal font-24 color-white pad-left-right-32 pad-top-bottom-8 radius6 mar-left-100">提现
				</view>
			</view>
		</view>

		<view class="list bg-white mar-top-20 pad-26" v-for="item in list">
			<view class="font-30 ">
				<view>
					<text>状态：</text>
					<text v-if="item.acct_state == 'CANCEL'">注销</text>
					<text v-else-if="item.acct_state == 'NORMAL'">正常</text>
				</view>
			</view>
			<view class="font-30 mar-top-30">
				<text>账户类型：</text>
				<text v-if="item.acct_type == 'USEROWN_PSETTLE'">用户自有待结算账户</text>
				<text v-else-if="item.acct_type == 'USEROWN_AVAILABLE'">用户自有可用账户</text>
				<text v-else-if="item.acct_type == 'MCHOWN_PSETTLE'">平台商户自有待结算账户</text>
				<text v-else-if="item.acct_type == 'MCHOWN_AVAILABLE'">平台商户自有可用账户</text>
				<text v-else-if="item.acct_type == 'MCHASSURE_PSETTLE'">平台商户担保待结算账户</text>
				<text v-else-if="item.acct_type == 'MCHASSURE_AVAILABLE'">平台商户担保可用账户</text>
				<text v-else-if="item.acct_type == 'MCHCOUPON_PSETTLE'">平台商户优惠券待结算账户</text>
				<text v-else-if="item.acct_type == 'MCHCOUPON_AVAILABLE'">MCHCOUPON_AVAILABLE</text>
				<text v-else-if="item.acct_type == 'MCHFEE_PSETTLE'">平台商户手续费结算账户</text>
				<text v-else-if="item.acct_type == 'MCHFEE_AVAILABLE'">平台商户手续费可用账户</text>
				<text v-else-if="item.acct_type == 'BANKCARD_DEBIT'">银行账户（借记卡）</text>
				<text v-else-if="item.acct_type == 'BANKCARD_CREDIT'">银行卡账户（信用卡）</text>
				<text v-else-if="item.acct_type == 'BANKCARD_ENTERPRISE'">银行账户（对公）</text>
				<text v-else-if="item.acct_type == 'THIRD_PARTY'">第三方账户</text>
			</view>

			<view class="font-28 mar-top-30">
				<view class="centerY mar-bottom-10">
					<view class="flex-w">资金余额:{{item.amt_balcur}}元</view>
					<view class="flex-w">可用余额:{{item.amt_balaval}}元</view>
				</view>
				<view class="centerY mar-bottom-10">
					<view class="flex-w">冻结金额:{{item.amt_balfrz}}元</view>
				</view>
			</view>
		</view>

		<view class="pad-26 bg-white mar-top-20" @click="hanldeCard">
			<view class="font-28 centerY betweenX">
				<view>银行卡管理</view>
				<view>
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
		</view>

		<view class="pad-26 bg-white mar-top-20" @click="hanldeEditPassWord">
			<view class="font-28 centerY betweenX">
				<view>修改支付密码</view>
				<view>
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
		</view>

		<view class="pad-26 bg-white mar-top-20" @click="hanldefindPassWord">
			<view class="font-28 centerY betweenX">
				<view>找回支付密码</view>
				<view>
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
		</view>

		<u-popup :show="isCode" :closeOnClickOverlay="false" closeable round="15" mode="center" @close="hanldeClose">
			<view class="pad-30 popup-box mar-top-50">
				<view class="font-30 color-grey mar-bottom-10">短信验证码</view>
				<u-input placeholder="请输入验证码" border="surround" v-model="verify_code"></u-input>
				<view class="betweenX mar-top-30 font-30">
					<view @click="hanldeConfirm"
						class="flex-w bg-theme color-white radius12 pad-top-bottom-15 button-style text-center">
						确定
					</view>
				</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	import {
		userWalletInfo,
		llPwdToken,
		changePwd,
		forgotPwdApply,
		backCardGetAll,
		forgotPwdVerify
	} from '@/config/api.js'
	import {
		llWallet
	} from '@/config/url.js'
	export default {
		data() {
			return {
				list: [],
				bank_account: '',
				// 输入验证码框
				isCode: false,
				verify_code: ''
			}
		},
		onLoad() {
			this.getList()
		},
		methods: {
			hanldeRecharge() {
				uni.navigateTo({
					url: '/pages/my/recharge'
				})
			},
			// 关闭验证码弹窗
			hanldeClose() {
				this.isCode = false
			},
			// 判断环境
			getEnvironment() {
				// #ifdef H5
				return 'H5'
				// #endif
			},
			// 确定验证码
			hanldeConfirm() {
				if (this.verify_code == '') {
					uni.showToast({
						title: '请输入验证码',
						icon: 'none'
					})
					return
				}

				this.isCode = false;
				llPwdToken({
					password_scene: 'setting_password',
					flag_chnl: 'H5',
				}).then(res => {

					// 以下参数通过服务端获取
					lianlianpay.invokePasswordControl({
						passwordScene: 'setting_password',
						oidPartner: res.data.oid_partner, // 商户号
						userId: res.data.user_id, // 用户号
						passwordElementToken: res.data.password_element_token, // 向服务端请求生成的 token
						env: llWallet, // 默认 production-生产
						styles: { // 样式集合
							themeColor: '#0E59F0', // 主题颜色（按钮等）
						}
					}, (res) => {

						let data = {
							plat_id: 11,
							ll_data: {
								token: this.toekn,
								random_key: res.data.randomKey,
								verify_code: this.verify_code,
								password: res.data.password
							}
						}

						forgotPwdVerify(data).then(res => {
							uni.showToast({
								title: res.msg
							})
							this.verify_code = '';
						})

					})
				})
			},
			// 找回密码
			hanldefindPassWord() {
				// #ifdef APP-PLUS
				uni.showToast({
					title: 'app暂时不支持，请前往h5找回密码',
					icon: 'none'
				})
				// #endif

				// #ifdef H5
				backCardGetAll({
					plat_id: 11
				}).then(card => {
					let data = {
						plat_id: 11,
						ll_data: {
							linked_acctno: card.data.linked_acctlist[0].linked_acctno,
						}
					}

					forgotPwdApply(data).then(res => {
						this.isCode = true;
						this.toekn = res.data.ll_data.token;
					})
				})
				// #endif
			},
			// 修改密码
			hanldeEditPassWord() {
				// #ifdef APP-PLUS
				uni.showToast({
					title: 'app暂时不支持，请前往h5修改密码',
					icon: 'none'
				})
				// #endif

				// #ifdef H5
				llPwdToken({
					password_scene: 'change_password',
					flag_chnl: 'H5',
				}).then(res => {
					// 以下参数通过服务端获取
					lianlianpay.invokePasswordControl({
						passwordScene: 'change_password',
						oidPartner: res.data.oid_partner, // 商户号
						userId: res.data.user_id, // 用户号
						passwordElementToken: res.data.password_element_token, // 向服务端请求生成的 token
						env: llWallet, // 默认 production-生产
						styles: { // 样式集合
							themeColor: '#0E59F0', // 主题颜色（按钮等）
						}
					}, (res) => {
						let data = {
							plat_id: 11,
							ll_data: {
								random_key: res.data.randomKey,
								password_new: res.data.password,
								password: res.data.oldPassword
							}
						}

						changePwd(data).then(apply => {
							uni.showToast({
								title: apply.msg
							})
						})
					})
				})
				// #endif

			},
			// 刷新数据
			isRefresh() {
				this.getList()
			},
			hanldeCard() {
				uni.navigateTo({
					url: '/pages/my/cardRun'
				})
			},
			// 跳转提现
			hanldeWithdrawal(item) {
				// #ifdef APP-PLUS
				uni.showToast({
					title: 'app暂时不支持，请前往h5提现操作',
					icon: 'none'
				})
				// #endif

				// #ifdef H5


				let money = this.list.map((item) => {
					if (item.acct_type == 'USEROWN_AVAILABLE') {
						console.log(item);
						return item.amt_balaval
					}
				}).filter(l => l != undefined);
				
				uni.navigateTo({
					url: '/pages/my/userApply?amount=' + money.join('')
				})
				// #endif
			},
			// 连连钱吧数据
			getList() {
				let list = uni.getStorageSync('llList');
				this.list = list;

				userWalletInfo({
					plat_id: 11
				}).then(res => {
					let {
						acctinfo_list,
						bank_account
					} = res.data.info;

					this.list = acctinfo_list;
					this.bank_account = bank_account;
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.container {
		background: #f5f5f5;

		.withdrawal {
			background: #3c9cff;
		}

		.popup-box {
			width: 490rpx;
		}

		.recharge {
			background: #5ac725;
		}
	}
</style>